.course-selection {
  .filter-card {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    .filter-form {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      
      .el-form-item {
        margin-bottom: 0;
        min-width: 200px;
      }
    }
  }
  
  .course-list {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .selection-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--el-text-color-regular);
        
        .info-icon {
          cursor: pointer;
          color: var(--el-color-info);
        }
      }
    }
    
    .course-detail {
      padding: 20px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 4px;
      
      p {
        margin: 10px 0;
        color: var(--el-text-color-regular);
        
        strong {
          color: var(--el-text-color-primary);
          margin-right: 10px;
        }
      }
    }
  }
  
  :deep(.el-table) {
    background-color: transparent;
    
    th, td {
      background-color: transparent;
      transition: background-color 0.3s ease;
    }
    
    th {
      background-color: rgba(255, 255, 255, 0.02);
      color: var(--el-text-color-regular);
      font-weight: 600;
    }
    
    td {
      color: var(--el-text-color-primary);
    }
    
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.05) !important;
    }
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
} 